<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
   
</head>
<body>
    <div class="box" id="myid">
        <span>123</span>
    </div>
    <div class="box2">333</div>
    <script>
        // jq会对外暴露一个 $对象 符号 ，所有的jq操作都会基于这个 $符号
        // 一、jq里的ready方法：dom结构加载完毕；
        // 1.文档加载完毕 ；
        // let $ = "dfafds";
        //  $$
        // 1.文档结构加载完毕 ready方法 
        // $(document).ready(function(){
            
           
        // })
    // 文档和资源加载完毕；
    // window.onload = function(){
    //      console.log(222);
    // }



        // 2.简写 
        // $(function(){
        //     // let boxEle = document.querySelector(".box");
        //     // console.log(boxEle);
        //     console.log(111)

        // })

        // window.addEventListener("DOMContentLoaded",function(){
        //     console.log(1111);
        // })

// 二、选择器 

// document.querySelector(".box").style.color = "red";

// 1.常规选择器：
// id选择器 
//  let ele =  $("#myid");
// //  console.log(ele);
// //  let ele1 = document.querySelector("#myid");
// //  console.log(ele1);
// // 修改样式；
// ele.css("color","red");

// $("#myid").css("color","red");

// 类名选择器 
// $(".box").css("color","red");

// 标签
// $("div").css("color","red");

// 后代
// $(".box      span").css("color","red");

// 组选择器 
// 如果有多个元素 操作的话 ，那么jq会隐式迭代；
$(".box span,.box2").css("color","red");






    </script>
</body>
</html>